<template>
  <div class="editPopup">
    <!-- 我的频道 -->
    <div class="my-channel">
      <van-cell title="我的频道" :border="false">
       <button @click="isEdit = !isEdit">{{ isEdit ? '完成' : '编辑'}}</button>
      </van-cell>
      <van-grid :gutter="10" :border="false">
        <van-grid-item
          @click="updatachannel(i, value.id)"
          v-for="(value, i) in editChannelData"
          :class="active === i ? 'current' : ''"
          :key="value.id"
          :text="value.name">
          <van-icon v-if="i !== 0 && isEdit" name="close" slot="icon" />
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 频道推荐 -->
    <div class="hot-channel">
      <van-cell title="频道推荐" :border="false">
      </van-cell>
      <van-grid :gutter="10" :border="false" direction="horizontal">
        <van-grid-item v-for="item in hotChannel" :key="item.id" icon="plus" :text="item.name" @click="addChannel(item)" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { channelsList, addUserChannels, delUserChannels } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  props: {
    editChannelData: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    },
    closePopup: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },

  watch: {
    closePopup: {
      handler: function () {
        if (!this.closePopup) {
          this.isEdit = false
        }
      },
      immediate: true
    }
  },

  computed: {
    ...mapState(['user']),
    // 筛选出未选中的数据
    hotChannel () {
      return this.allChannels.filter(item => !this.editChannelData.find(value => item.id === value.id))
      // return this.allChannels.filter(item => {
      //   return !this.editChannelData.find(value => {
      //     return item.id === value.id
      //   })
      // })
    }
  },

  created () {
    this.loadChannels()
  },

  methods: {
    // 加载全部数据
    async loadChannels () {
      try {
        const { data: res } = await channelsList()
        this.allChannels = res.data.channels
      } catch (err) {
        this.$toast('获取失败')
      }
    },
    // 添加到我的频道中
    async addChannel (data) {
      // 登陆的话用请求
      if (this.user) {
        try {
          const { data: res } = await addUserChannels({
            id: data.id,
            seq: this.editChannelData.length
          })
          console.log(res)
          this.$toast.success('添加成功')
        } catch (err) {
          return this.$toast('添加失败')
        }
      }

      this.editChannelData.push(data)

      // 不登录保存到本地
      if (!this.user) {
        setItem('UNTOKEN_LOCALDATA', this.editChannelData)
      }
    },
    // 编辑
    updatachannel (i, id) {
      if (this.isEdit) {
        // 删除
        if (i <= this.active) {
          this.$emit('updata_active', this.active - 1, true)
        }
        this.editChannelData.splice(i, 1)
        this.deleteChannel(id)
      } else {
        // 跳转
        this.$emit('updata_active', i, false)
      }
    },
    // 删除操作
    async deleteChannel (id) {
      if (this.user) {
        try {
          await delUserChannels(id)
          this.$toast('删除成功')
        } catch (err) {
          this.$toast('删除失败')
        }
      } else {
        setItem('UNTOKEN_LOCALDATA', this.editChannelData)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.current {
  /deep/.van-grid-item__text {
    color: red;
  }
}
.editPopup {
  padding-top: 90px;
  .my-channel {
    button {
      padding: 0 0;
      width: 104px;
      height: 48px;
      background-color: #fff;
      border: 1px solid #f85959;
      color: #f85959;
      font-size: 24px;
      text-align: center;
      line-height: 48px;
      border-radius: 24px;
    }
  }
}

/deep/.van-grid {
  .van-grid-item {
    .van-icon-close {
      font-size: 34px;
      position: absolute;
      top: -15px;
      right: 5px;
    }
    .van-grid-item__content {
      width: 160px;
      height: 86px;
      background: #F4F5F6;
      border-radius: 6px;
    }
  }
}

/deep/.hot-channel {
  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        .van-grid-item__text {
          line-height: unset;
        }
        .van-icon {
          font-size: 30px;
        }
      }
    }
  }
}
/deep/.van-grid-item__icon-wrapper {
  position: unset;
}
</style>
